<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>短信审核及发送</title>
    <link rel="stylesheet" href="static/common-page.css">
    <link rel="stylesheet" href="static/themes/gray/easyui.css">
    <link rel="stylesheet" href="static/themes/iconfont/iconfont.css">
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/jquery.easyui.min.js"></script>
    <script src="static/js/easyui-lang-zh_CN.js"></script>
    <script src="static/js/layer/layer.js"></script>
    <script src="static/js/moment.js"></script>
    <!--    <script src="static/js/dayjs.min.js"></script>-->
</head>
<body>
<div id="datagrid1"></div>
<div id="toolbar1">
    <div style="margin:5px 0 0 25px;">
        <!--        <div class="form-control">
                    <input id="text_keywords" type="text" class="form-control-text-input">
                </div>-->
        <div class="form-control">
            <button id="button_add" type="button" class="form-control-button form-control-button--primary">
                <!--<i class="iconfont icon-search1 button-icon"></i>-->新增
            </button>
        </div>
    </div>
</div>
<div class="easyui-window" id="window1"
     data-options="title:'修改信息',width:400,height:200,
     closed:true,
     modal: true,
     collapsible:false,
     minimizable:false,
     maximizable:false,
     resizable:false"
>
    <div class="easyui-layout" fit="true" border="false">
        <div region="center" border="false">
            <div style="margin:35px 0 0 25px;">
                <form action="" id="form_valid1">
                    <div class="form-control">
                        用户组名称：
                        <div class="control-item">
                            <input id="input_text1" type="text" name="userGroupName"
                                   class="form-control-text-input easyui-validatebox"
                                   data-options="required:true,missingMessage:'请输入用户组名称'"/>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div region="south" border="false" style="height:45px;overflow: hidden;text-align: right;">
            <div class="form-control" style="margin-right:20px;">
                <button id="button2" type="button" class="form-control-button form-control-button--primary">
                    <i class="iconfont icon-fasong1 button-icon"></i>确定
                </button>
            </div>
        </div>
    </div>
</div>
<script>

$(function() {
    var pageMethods = {
        currRow: null,
        // 编辑弹窗
        editDialog: function(row) {
            this.currRow = row
            $('#window1').window('open');
            $('#window1').window('setTitle', '新增');
            $('#input_text1').val('');
            if (!$.isEmptyObject(row)) {
                $('#window1').window('setTitle', '修改信息');
                $('#input_text1').val(row.userGroupName)
            }
            $('#form_valid1').form('validate')
        },
        // 提交修改
        saveRow: function() {
            if ($('#form_valid1').form('validate')) {
                this.currRow.userGroupName = $('#input_text1').val()
                $.post('url', this.currRow, function() {
                    $.messager.alert('保存成功');
                    $('#window1').window('close');
                    $('#datagrid1').datagrid('reload');
                }, 'json')
            }
        },
        // 删除记录
        deleRow: function(id) {
            $.messager.confirm('提示', '确定删除吗?', function(yes) {
                if (yes) {
                    // alert(rowid)
                    $.get('', { id: id }, function() {
                        $.messager.alert('删除成功');
                        $('#datagrid1').datagrid('reload');
                    }, 'json')
                }
            })
        }
    }
    // 修改
    $(document).on('click', '.form-control-button-edit', function() {
        var rowindex = $(this).data('rowindex');
        var rows = $('#datagrid1').datagrid('getRows');
        var row = rows[rowindex];
        pageMethods.editDialog(row);
    })
    // 新增
    $('#button_add').click(function() {
        pageMethods.editDialog({});
    })
    // 删除
    $(document).on('click', '.form-control-button-delete', function() {
        var rowid = $(this).data('rowid');
        pageMethods.deleRow(rowid);
    })
    // 保存修改
    $('#button2').click(function() {
        pageMethods.saveRow()
    })

    $('#datagrid1').datagrid({
        url: 'data/datagrid1.json',
        toolbar: '#toolbar1',
        singleSelect: true,
        fit: true,
        fitColumns: true,
        columns: [
            [
                { field: 'userGroupName', title: '用户组名称', width: 600, align: 'center' },
                {
                    field: 'opt', title: '操作', width: 60, align: 'center', formatter: function(value, row, index) {
                        return '' +
                            '<button class="form-control-button small form-control-button-edit" type="button" style="margin-right:15px;" data-rowindex="' + index + '">修改</button>' +
                            '<button class="form-control-button small form-control-button-delete form-control-button--danger" type="button" data-rowid="' + row.id + '">删除</button>'
                    }
                }
            ]
        ]
    })
})
</script>
</body>
</html>
